<template>
	<view>

		<view class="excelExport_box">
			<view class="excelInfo_con">
				<view class="excelPic">
					<image src="/static/note/excel.png" mode=""></image>
				</view>
				<view class="excelName">{{excelName}}</view>
				<view class="excelPreview">
					<view class="previewBtn" @click="lookExcel">点击预览</view>
				</view>
			</view>
			<view class="excelPost_con">
				<button class="excelBtn" @click="shareFile" hover-class="none">
					<view class="excelIcon">
						<image src="/static/note/shareBtn.png" mode=""></image>
					</view>
					<view class="excelType">分享好友</view>
				</button>
				<view class="excelBtn" @click="downFile">
					<view class="excelIcon">
						<image src="/static/note/down.png" mode=""></image>
					</view>
					<view class="excelType">下载到手机</view>
				</view>
				<view class="excelBtn" @click="copyText(excelUrl)">
					<view class="excelIcon">
						<image src="/static/note/copyBtn.png" mode=""></image>
					</view>
					<view class="excelType">复制链接</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				excelUrl: '',
				downFileUrl: '',
				excelName: '施工日志.pdf',
				project_id: '',
				user_id: '',
				role: 2,

			}
		},
		onShareAppMessage() {

		},
		onLoad(e) {
			var _this = this;
			_this.excelUrl = _this.$baseURL + '/api/project.remark/remarkPdf?project_id=' + e.project_id + '&start=' + e
				.start + '&end=' + e.end + '&member_id=' + e.member_id;
			_this.getFile();
		},
		methods: {
			getFile() {
				var _this = this;
				wx.downloadFile({
					url: _this.excelUrl, // 下载url
					success(res) {
						console.log(res.tempFilePath)
						console.log(res.tempFilePath)
						_this.downFileUrl = res.tempFilePath;

					}
				})
			},

			/**
			 * 分享文件
			 */
			downFile() {
				var _this = this;

				uni.showToast({
					title: '下载成功'
				})
				return;
				wx.downloadFile({
					url: _this.excelUrl, // 下载url
					success(res) {
						console.log(res.tempFilePath)
						_this.downFileUrl = res.tempFilePath;

					}
				})
			},

			/**
			 * 分享文件
			 */
			shareFile() {
				var _this = this;
				if (!_this.downFileUrl) {
					_this.shareFile();
					return;
				}
				console.log('文件====')
				console.log(_this.downFileUrl)
				wx.shareFileMessage({
					filePath: _this.downFileUrl,
					fileName: _this.excelName,
					success() {},
					fail: console.error,
				})
			},

			/**
			 * 点击预览
			 */
			lookExcel() {
				var _this = this;
				wx.openDocument({
					filePath: _this.downFileUrl,
					success: function(res) {
						console.log('打开文档成功')
					}
				})
			},

			// 复制文本
			copyText(text) {
				console.log(text);
				// #ifdef H5
				this.$copyText(text).then(
					res => {
						uni.showToast({
							title: '复制成功'
						})
					}
				)
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.excelExport_box {
		padding: 100rpx 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		background-color: $uni-bg;
	}

	.excelInfo_con {
		border-bottom: 1rpx solid #dcdcdc;
		overflow: hidden;
	}

	.excelPic {
		width: 100%;
		text-align: center;

	}

	.excelPic image {
		width: 134rpx;
		height: 134rpx;
	}

	.excelName {
		font-size: 30rpx;
		font-weight: bold;
		color: #000;
		text-align: center;
		margin-top: 30rpx;
	}

	.excelPreview {
		width: 100%;
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 60rpx;
	}

	.previewBtn {
		display: inline-block;
		width: 280rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: $uni-color-white;
		background: $uni-color-active;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.excelPost_con {
		padding-top: 80rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.excelBtn {
		width: 100%;
		text-align: center;
	}

	.excelBtn image {
		width: 84rpx;
		height: 84rpx;
	}

	.excelType {
		font-size: 30rpx;
		color: #000;
		margin-top: 5rpx;
	}
</style>
